import 'dart:math' show pi;

import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';

class StoreMainController extends GetxController {
  List<_ProductPrice> products = [];

  @override
  void onInit() {
    initData();
    super.onInit();
  }

  void initData() {
    products.add(_ProductPrice(
        title: '6.5折参考价',
        amount: 79,
        imgUrl:
            'https://img.alicdn.com/bao/uploaded/i3/3534803790/O1CN01iiUplc1drs2orHmMe_!!0-item_pic.jpg'));
    products.add(_ProductPrice(
        title: '7.5折参考价',
        amount: 98,
        imgUrl:
            'https://img.alicdn.com/bao/uploaded/i1/154041755/O1CN01lW67hs1Opq3XyLVGj_!!0-item_pic.jpg'));
    products.add(_ProductPrice(
        title: '新品推荐',
        amount: 86,
        imgUrl:
            'https://img.alicdn.com/bao/uploaded/i4/2505513209/O1CN01GojFqi1ZZls7vmgsK_!!0-item_pic.jpg'));
  }
}

class StoreMainView extends GetView<StoreMainController> {
  const StoreMainView({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Container(
            height: 150,
            decoration:
                BoxDecoration(color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)),
            alignment: Alignment.center,
            child: Container(
              constraints: const BoxConstraints.expand(width: 320, height: 115),
              child: Row(
                children: [
                  ClipRRect(
                    borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(5), bottomLeft: Radius.circular(5)),
                    child: CachedNetworkImage(
                      imageUrl:
                          'https://img.alicdn.com/bao/uploaded/i1/2201554658411/O1CN01von3id2C0HthTFzhr_!!0-item_pic.jpg',
                      width: 142,
                      height: 115,
                      fit: BoxFit.fill,
                    ),
                  ),
                  Expanded(
                      child: Container(
                    padding: const EdgeInsets.only(left: 10, top: 10),
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(5), bottomRight: Radius.circular(5)),
                    ),
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            '不负好时光的穿搭秘诀',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontWeight: FontWeight.w500),
                          ),
                        ),
                        Container(
                          margin: const EdgeInsets.only(top: 10, bottom: 15),
                          alignment: Alignment.centerLeft,
                          child: Container(
                            constraints: const BoxConstraints.expand(width: 73, height: 24),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                                borderRadius: BorderRadius.circular(5)),
                            child: Text.rich(TextSpan(children: [
                              const WidgetSpan(
                                  child: CircleAvatar(
                                    radius: 5,
                                    backgroundColor: Colors.white,
                                  ),
                                  alignment: PlaceholderAlignment.middle),
                              TextSpan(
                                  text: '  直播中',
                                  style:
                                      StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize12))
                            ])),
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Wrap(
                            spacing: 20,
                            children: [
                              Text(
                                '20.74万人观看',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12),
                              ),
                              Text.rich(TextSpan(children: [
                                WidgetSpan(
                                    child: SvgUtils.assetName('u8571', width: 18, height: 15)),
                                TextSpan(
                                    text: ' 3231',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color9999,
                                        fontSize: StylesUtils.fontSize12))
                              ]))
                            ],
                          ),
                        )
                      ],
                    ),
                  ))
                ],
              ),
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 20),
          sliver: SliverToBoxAdapter(
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.only(bottom: 15),
              child: Column(
                children: [
                  Container(
                    height: 35,
                    alignment: Alignment.center,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                    child: Text(
                      '韩风快时尚品牌 销量第一',
                      style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize16, fontWeight: FontWeight.w500),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 20, right: 10, left: 10, bottom: 20),
                    child: StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 10,
                      children: [
                        Container(
                          height: 80,
                          decoration: BoxDecoration(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                              borderRadius: BorderRadius.circular(5)),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 25),
                                alignment: Alignment.center,
                                child: Text(
                                  '加购享秒杀',
                                  style: StylesUtils.customTextStyle(
                                      fontWeight: FontWeight.w600,
                                      fontSize: StylesUtils.fontSize16),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  'T血29.9元限量抢',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorE4e4,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          height: 80,
                          decoration: BoxDecoration(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                              borderRadius: BorderRadius.circular(5)),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 15),
                                alignment: Alignment.center,
                                child: Text(
                                  '-30',
                                  style: StylesUtils.customTextStyle(
                                      fontWeight: FontWeight.w600,
                                      fontSize: StylesUtils.fontSize28),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '满200使用',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorE4e4,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              )
                            ],
                          ),
                        ),
                        Container(
                          height: 80,
                          decoration: BoxDecoration(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF59a2),
                              borderRadius: BorderRadius.circular(5)),
                          child: Column(
                            children: [
                              Container(
                                margin: const EdgeInsets.only(top: 25),
                                alignment: Alignment.center,
                                child: Text(
                                  '缤纷新人礼物',
                                  style: StylesUtils.customTextStyle(
                                      fontWeight: FontWeight.w600,
                                      fontSize: StylesUtils.fontSize16),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 5),
                                alignment: Alignment.center,
                                child: Text(
                                  '首次购买小惊喜',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorE4e4,
                                      fontSize: StylesUtils.fontSize12),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Center(
                    child: Container(
                      constraints: const BoxConstraints.expand(width: 335, height: 170),
                      decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          borderRadius: BorderRadius.circular(5)),
                      child: Row(
                        children: [
                          Container(
                            width: 100,
                            height: 170,
                            alignment: Alignment.center,
                            child: CachedNetworkImage(
                              imageUrl:
                                  'https://cbu01.alicdn.com/img/ibank/O1CN01cqXPZ225WAGsLhI9v_!!2207216607533-0-cib.220x220.jpg',
                              width: 50,
                              height: 40,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                              child: Padding(
                            padding: const EdgeInsets.only(top: 20),
                            child: Column(
                              children: [
                                Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    'Summer Sale',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize28,
                                        fontWeight: FontWeight.w600),
                                  ),
                                ),
                                Container(
                                  alignment: Alignment.centerLeft,
                                  margin: const EdgeInsets.only(top: 5),
                                  child: Text(
                                    '清仓就要玩大的',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorF2f2),
                                  ),
                                ),
                                Container(
                                  alignment: Alignment.centerLeft,
                                  margin: const EdgeInsets.only(top: 10),
                                  child: Text(
                                    '3件65折 2件7折',
                                    style:
                                        StylesUtils.customTextStyle(color: ColorsUtils.colorF2f2),
                                  ),
                                ),
                                Align(
                                  alignment: Alignment.centerLeft,
                                  child: TextButton(
                                      onPressed: () {},
                                      style: ButtonStyle(
                                          backgroundColor: WidgetStateProperty.all(Colors.white),
                                          padding: const WidgetStatePropertyAll(EdgeInsets.zero),
                                          minimumSize: const WidgetStatePropertyAll(Size(120, 24)),
                                          alignment: Alignment.center,
                                          shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                                              borderRadius: BorderRadius.circular(12)))),
                                      child: Text.rich(TextSpan(children: [
                                        TextSpan(
                                            text: '超划算',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color6666)),
                                        TextSpan(
                                            text: '￥6.6',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.colorF95e)),
                                        TextSpan(
                                            text: '起',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color6666)),
                                      ]))),
                                )
                              ],
                            ),
                          ))
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 20),
          sliver: SliverToBoxAdapter(
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.only(top: 5, bottom: 20),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      constraints: const BoxConstraints.expand(width: 114, height: 30),
                      decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF95e),
                          borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(15), bottomRight: Radius.circular(15))),
                      alignment: Alignment.center,
                      child: Text(
                        '人气新品榜单',
                        style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 10),
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 15, bottom: 15),
                    child: Text.rich(TextSpan(children: [
                      TextSpan(
                          text: '6月6日0点，限时5件 ',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize16)),
                      TextSpan(
                          text: '65',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorF95e,
                              fontWeight: FontWeight.w600,
                              fontSize: StylesUtils.fontSize18)),
                      TextSpan(
                          text: '折',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize16)),
                    ])),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 15,
                      children: [
                        for (var i = 1; i < 6; i++)
                          Column(
                            children: [
                              Stack(
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(5),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://cbu01.alicdn.com/img/ibank/O1CN01bx0DtP2LptJeO2lVg_!!939149742-0-cib.300x300.jpg',
                                      width: 100,
                                      height: 100,
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  Positioned(
                                      bottom: 0,
                                      left: 0,
                                      child: Container(
                                        decoration: BoxDecoration(
                                            color: ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorE4e4),
                                            borderRadius: const BorderRadius.only(
                                                bottomLeft: Radius.circular(5))),
                                        alignment: Alignment.center,
                                        constraints:
                                            const BoxConstraints.expand(width: 50, height: 20),
                                        child: Text(
                                          'TOP$i',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color3333,
                                              fontSize: StylesUtils.fontSize12),
                                        ),
                                      ))
                                ],
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                      text: '6.5折参考价',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color3333,
                                          fontSize: StylesUtils.fontSize12)),
                                  TextSpan(
                                      text: '¥44',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorF95e,
                                          fontWeight: FontWeight.w700))
                                ])),
                              )
                            ],
                          )
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 20),
          sliver: SliverToBoxAdapter(
            child: Container(
              color: Colors.white,
              padding: const EdgeInsets.only(top: 5, bottom: 20),
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      constraints: const BoxConstraints.expand(width: 114, height: 30),
                      decoration: BoxDecoration(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF95e),
                          borderRadius: const BorderRadius.only(
                              topRight: Radius.circular(15), bottomRight: Radius.circular(15))),
                      alignment: Alignment.center,
                      child: Text(
                        '爆品折扣榜单',
                        style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 10),
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.only(left: 15, bottom: 15),
                    child: Text.rich(TextSpan(children: [
                      TextSpan(
                          text: '6月6日0点，限时',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize16)),
                      TextSpan(
                          text: '300',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorF95e,
                              fontWeight: FontWeight.w600,
                              fontSize: StylesUtils.fontSize18)),
                      TextSpan(
                          text: '减',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize16)),
                      TextSpan(
                          text: '80',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorF95e,
                              fontWeight: FontWeight.w600,
                              fontSize: StylesUtils.fontSize18)),
                    ])),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: StaggeredGrid.count(
                      crossAxisCount: 3,
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 15,
                      children: [
                        for (var i = 1; i < 6; i++)
                          Column(
                            children: [
                              Stack(
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(5),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://cbu01.alicdn.com/img/ibank/O1CN01kHhx5c1icp5mQKsIk_!!2215932074434-0-cib.300x300.jpg',
                                      width: 100,
                                      height: 100,
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  Positioned(
                                      bottom: 0,
                                      left: 0,
                                      child: Container(
                                        decoration: BoxDecoration(
                                            color: ColorsUtils.parseColorFromHexString(
                                                ColorsUtils.colorE4e4),
                                            borderRadius: const BorderRadius.only(
                                                bottomLeft: Radius.circular(5))),
                                        alignment: Alignment.center,
                                        constraints:
                                            const BoxConstraints.expand(width: 50, height: 20),
                                        child: Text(
                                          'TOP$i',
                                          style: StylesUtils.customTextStyle(
                                              color: ColorsUtils.color3333,
                                              fontSize: StylesUtils.fontSize12),
                                        ),
                                      ))
                                ],
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.centerLeft,
                                child: Text.rich(TextSpan(children: [
                                  TextSpan(
                                      text: '活动价',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color3333,
                                          fontSize: StylesUtils.fontSize12)),
                                  TextSpan(
                                      text: '¥78',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.colorF95e,
                                          fontWeight: FontWeight.w700))
                                ])),
                              )
                            ],
                          )
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
        SliverPadding(
          padding: const EdgeInsets.only(top: 20),
          sliver: SliverToBoxAdapter(
            child: Container(
              color: Colors.white,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.only(bottom: 20, top: 10),
                    child: Text(
                      '热销类目推荐',
                      style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize18,
                          color: ColorsUtils.color3333,
                          fontWeight: FontWeight.w700),
                    ),
                  ),
                  Center(
                    child: Wrap(
                      spacing: 20,
                      children: [
                        SizedBox(
                          width: 100,
                          height: 113,
                          child: Column(
                            children: [
                              Container(
                                constraints: const BoxConstraints.expand(width: 100, height: 90),
                                child: Stack(
                                  fit: StackFit.expand,
                                  children: [
                                    ClipRRect(
                                      borderRadius: const BorderRadius.only(
                                          topLeft: Radius.circular(5),
                                          topRight: Radius.circular(5)),
                                      child: CachedNetworkImage(
                                        imageUrl:
                                            'https://cbu01.alicdn.com/img/ibank/O1CN01ITtrNl1U1M5DampoJ_!!2217626962457-0-cib.300x300.jpg',
                                        fit: BoxFit.fill,
                                        width: 100,
                                        height: 90,
                                      ),
                                    ),
                                    Positioned(
                                        top: 5,
                                        right: -13,
                                        child: Transform.rotate(
                                          angle: pi / 4,
                                          child: Container(
                                            alignment: Alignment.center,
                                            width: 49,
                                            height: 13,
                                            decoration: BoxDecoration(
                                                color: ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorF048)),
                                            child: Text(
                                              '热门',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: StylesUtils.fontSize10,
                                                  fontWeight: FontWeight.w700),
                                            ),
                                          ),
                                        ))
                                  ],
                                ),
                              ),
                              Expanded(
                                  child: Container(
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                                    borderRadius: const BorderRadius.only(
                                        bottomLeft: Radius.circular(5),
                                        bottomRight: Radius.circular(5))),
                                child: Text(
                                  'T恤',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ))
                            ],
                          ),
                        ),
                        SizedBox(
                          width: 100,
                          height: 113,
                          child: Column(
                            children: [
                              Container(
                                constraints: const BoxConstraints.expand(width: 100, height: 90),
                                child: Stack(
                                  fit: StackFit.expand,
                                  children: [
                                    ClipRRect(
                                      borderRadius: const BorderRadius.only(
                                          topLeft: Radius.circular(5),
                                          topRight: Radius.circular(5)),
                                      child: CachedNetworkImage(
                                        imageUrl:
                                            'https://cbu01.alicdn.com/img/ibank/O1CN01ITtrNl1U1M5DampoJ_!!2217626962457-0-cib.300x300.jpg',
                                        fit: BoxFit.fill,
                                        width: 100,
                                        height: 90,
                                      ),
                                    ),
                                    Positioned(
                                        top: 5,
                                        right: -13,
                                        child: Transform.rotate(
                                          angle: pi / 4,
                                          child: Container(
                                            alignment: Alignment.center,
                                            width: 49,
                                            height: 13,
                                            decoration: BoxDecoration(
                                                color: ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorF048)),
                                            child: Text(
                                              '热门',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: StylesUtils.fontSize10,
                                                  fontWeight: FontWeight.w700),
                                            ),
                                          ),
                                        ))
                                  ],
                                ),
                              ),
                              Expanded(
                                  child: Container(
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                                    borderRadius: const BorderRadius.only(
                                        bottomLeft: Radius.circular(5),
                                        bottomRight: Radius.circular(5))),
                                child: Text(
                                  '牛仔裤',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ))
                            ],
                          ),
                        ),
                        SizedBox(
                          width: 100,
                          height: 113,
                          child: Column(
                            children: [
                              Container(
                                constraints: const BoxConstraints.expand(width: 100, height: 90),
                                child: Stack(
                                  fit: StackFit.expand,
                                  children: [
                                    ClipRRect(
                                      borderRadius: const BorderRadius.only(
                                          topLeft: Radius.circular(5),
                                          topRight: Radius.circular(5)),
                                      child: CachedNetworkImage(
                                        imageUrl:
                                            'https://cbu01.alicdn.com/img/ibank/O1CN01ITtrNl1U1M5DampoJ_!!2217626962457-0-cib.300x300.jpg',
                                        fit: BoxFit.fill,
                                        width: 100,
                                        height: 90,
                                      ),
                                    ),
                                    Positioned(
                                        top: 5,
                                        right: -13,
                                        child: Transform.rotate(
                                          angle: pi / 4,
                                          child: Container(
                                            alignment: Alignment.center,
                                            width: 49,
                                            height: 13,
                                            decoration: BoxDecoration(
                                                color: ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorF048)),
                                            child: Text(
                                              '热门',
                                              style: StylesUtils.customTextStyle(
                                                  fontSize: StylesUtils.fontSize10,
                                                  fontWeight: FontWeight.w700),
                                            ),
                                          ),
                                        ))
                                  ],
                                ),
                              ),
                              Expanded(
                                  child: Container(
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                                    borderRadius: const BorderRadius.only(
                                        bottomLeft: Radius.circular(5),
                                        bottomRight: Radius.circular(5))),
                                child: Text(
                                  '裙装',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ))
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                    child: Wrap(
                      crossAxisAlignment: WrapCrossAlignment.center,
                      alignment: WrapAlignment.start,
                      spacing: 10,
                      runSpacing: 10,
                      children: [
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '衬衫',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '休闲裤',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '男装',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '时尚套装',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '衬衫',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '休闲裤',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '男装',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                        Container(
                          constraints: box,
                          decoration: BoxDecoration(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFbb8),
                          ),
                          alignment: Alignment.center,
                          child: Text(
                            '时尚套装',
                            style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize13),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 20),
                    child: Column(
                      children: [
                        Container(
                          alignment: Alignment.centerLeft,
                          padding: const EdgeInsets.only(bottom: 15),
                          child: Text.rich(TextSpan(children: [
                            TextSpan(
                                text: '明星IP同款 ',
                                style: StylesUtils.customTextStyle(
                                    fontWeight: FontWeight.w500, color: ColorsUtils.color3333)),
                            TextSpan(
                                text: 'super collection',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
                          ])),
                        ),
                        StaggeredGrid.count(
                          crossAxisCount: 3,
                          crossAxisSpacing: 10,
                          children: [
                            SizedBox(
                              height: 100,
                              child: Column(
                                children: [
                                  ClipRRect(
                                    borderRadius: const BorderRadius.only(
                                        topLeft: Radius.circular(5), topRight: Radius.circular(5)),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img.alicdn.com/bao/uploaded/i4/2505513209/O1CN01GojFqi1ZZls7vmgsK_!!0-item_pic.jpg',
                                      width: 100,
                                      height: 80,
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  Container(
                                    height: 20,
                                    alignment: Alignment.center,
                                    decoration: const BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.only(
                                            bottomLeft: Radius.circular(5),
                                            bottomRight: Radius.circular(5))),
                                    child: Text(
                                      '4632系列',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color0000,
                                          fontSize: StylesUtils.fontSize13),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(
                              height: 100,
                              child: Column(
                                children: [
                                  ClipRRect(
                                    borderRadius: const BorderRadius.only(
                                        topLeft: Radius.circular(5), topRight: Radius.circular(5)),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img.alicdn.com/bao/uploaded/i2/2208654807012/O1CN01W8c3mI21fXxt2nHX5_!!0-item_pic.jpg',
                                      width: 100,
                                      height: 80,
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  Container(
                                    height: 20,
                                    alignment: Alignment.center,
                                    decoration: const BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.only(
                                            bottomLeft: Radius.circular(5),
                                            bottomRight: Radius.circular(5))),
                                    child: Text(
                                      'DALOKA',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color0000,
                                          fontSize: StylesUtils.fontSize13),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(
                              height: 100,
                              child: Column(
                                children: [
                                  ClipRRect(
                                    borderRadius: const BorderRadius.only(
                                        topLeft: Radius.circular(5), topRight: Radius.circular(5)),
                                    child: CachedNetworkImage(
                                      imageUrl:
                                          'https://img.alicdn.com/bao/uploaded/i2/2988359348/O1CN01lopZMx2IvR1Mwfwlq_!!2988359348.jpg',
                                      width: 100,
                                      height: 80,
                                      fit: BoxFit.fill,
                                    ),
                                  ),
                                  Container(
                                    height: 20,
                                    alignment: Alignment.center,
                                    decoration: const BoxDecoration(
                                        color: Colors.white,
                                        borderRadius: BorderRadius.only(
                                            bottomLeft: Radius.circular(5),
                                            bottomRight: Radius.circular(5))),
                                    child: Text(
                                      '娜扎同款',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color0000,
                                          fontSize: StylesUtils.fontSize13),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(bottom: 20),
                    alignment: Alignment.center,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(5),
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.alicdn.com/bao/uploaded/i2/2212758619877/O1CN01AZefi12MpiepdMsE7_!!2212758619877.jpg',
                        width: 333,
                        height: 170,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                  StaggeredGrid.count(
                    crossAxisCount: 2,
                    crossAxisSpacing: 10,
                    children: [
                      Column(
                        children: [
                          ClipRRect(
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5), topRight: Radius.circular(5)),
                            child: CachedNetworkImage(
                              imageUrl:
                                  'https://img.alicdn.com/bao/uploaded/i2/2212726504614/O1CN01AMY3gE1jxGA7eVxey_!!0-item_pic.jpg',
                              height: 188,
                              width: 164,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Container(
                            constraints: const BoxConstraints.expand(width: 164, height: 30),
                            decoration: BoxDecoration(
                                color: ColorsUtils.parseColorFromHexString('#FEEAED'),
                                borderRadius: const BorderRadius.only(
                                    bottomLeft: Radius.circular(5),
                                    bottomRight: Radius.circular(5))),
                            alignment: Alignment.center,
                            child: Text(
                              'HSTYLE元气少女系列',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color0000, fontSize: StylesUtils.fontSize13),
                            ),
                          )
                        ],
                      ),
                      Column(
                        children: [
                          ClipRRect(
                            borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(5), topRight: Radius.circular(5)),
                            child: Stack(
                              children: [
                                CachedNetworkImage(
                                  imageUrl:
                                      'https://img.alicdn.com/bao/uploaded/i2/401237827/O1CN01VOUBLx27gojjyscbu_!!0-item_pic.jpg',
                                  height: 188,
                                  width: 164,
                                  fit: BoxFit.fill,
                                ),
                                Positioned(
                                    width: 50,
                                    height: 20,
                                    top: 0,
                                    right: 0,
                                    child: Container(
                                      decoration: BoxDecoration(
                                          color: ColorsUtils.parseColorFromHexString(
                                              ColorsUtils.colorF95e),
                                          borderRadius: const BorderRadius.only(
                                              topRight: Radius.circular(5),
                                              bottomLeft: Radius.circular(5))),
                                      alignment: Alignment.center,
                                      child: Text(
                                        '新上',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: StylesUtils.fontSize10),
                                      ),
                                    ))
                              ],
                            ),
                          ),
                          Container(
                            constraints: const BoxConstraints.expand(width: 164, height: 30),
                            decoration: BoxDecoration(
                                color: ColorsUtils.parseColorFromHexString('#FEEAED'),
                                borderRadius: const BorderRadius.only(
                                    bottomLeft: Radius.circular(5),
                                    bottomRight: Radius.circular(5))),
                            alignment: Alignment.center,
                            child: Text(
                              'HSTYLE.POWER系列',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color0000, fontSize: StylesUtils.fontSize13),
                            ),
                          )
                        ],
                      ),
                    ],
                  ),
                  Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.only(top: 20),
                    child: SizedBox(
                      width: 333,
                      height: 245,
                      child: Swiper.list(
                        list: controller.products,
                        autoplay: true,
                        autoplayDelay: 5000,
                        duration: 500,
                        builder: (_, data, index) {
                          return Column(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(5),
                                child: CachedNetworkImage(
                                  imageUrl: data.imgUrl,
                                  width: 333,
                                  height: 170,
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Center(
                                child: Wrap(
                                  spacing: 10,
                                  alignment: WrapAlignment.center,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  children: [
                                    Text(
                                      data.title,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: StylesUtils.fontSize16,
                                          color: ColorsUtils.color3333),
                                    ),
                                    TextButton(
                                        onPressed: () {},
                                        style: ButtonStyle(
                                            alignment: Alignment.center,
                                            padding: const WidgetStatePropertyAll(EdgeInsets.zero),
                                            minimumSize: const WidgetStatePropertyAll(Size(54, 30)),
                                            backgroundColor: WidgetStatePropertyAll(
                                                ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorF048)),
                                            shape: WidgetStatePropertyAll(RoundedRectangleBorder(
                                                borderRadius: BorderRadius.circular(5)))),
                                        child: Text(
                                          '￥${data.amount}',
                                          style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize18),
                                        ))
                                  ],
                                ),
                              )
                            ],
                          );
                        },
                        pagination: SwiperPagination(
                          alignment: Alignment.bottomCenter,
                          margin: EdgeInsets.zero,
                          builder: DotSwiperPaginationBuilder(
                              size: 15,
                              activeSize: 15,
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                              activeColor:
                                  ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                    child: StaggeredGrid.count(
                      crossAxisCount: 2,
                      crossAxisSpacing: 10,
                      mainAxisSpacing: 20,
                      children: [
                        for (var i = 0; i < 10; i++)
                          Column(
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(5),
                                child: CachedNetworkImage(
                                  imageUrl:
                                      'https://img.alicdn.com/bao/uploaded/i3/2454618198/O1CN01fWtLnt2AQjcq4o5Rh_!!0-item_pic.jpg',
                                  width: double.infinity,
                                  height: 177,
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 15),
                                alignment: Alignment.centerLeft,
                                child: Wrap(
                                  spacing: 20,
                                  alignment: WrapAlignment.start,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  children: [
                                    Text(
                                      '65折参考价',
                                      style:
                                          StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                                    ),
                                    Text(
                                      '￥51',
                                      style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    )
                                  ],
                                ),
                              )
                            ],
                          )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        SliverToBoxAdapter(
          child: Padding(padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 15), child: Row(
            children: [
              Expanded(child: Center(
                child: Container(
                  height: 1,
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4),
                ),
              )),
              Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.symmetric(horizontal: 15),
                child: Text('我是有底线的', style: StylesUtils.customTextStyle(color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13),),
              ),
              Expanded(child: Center(
                child: Container(
                  height: 1,
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4),
                ),
              ))
            ],
          ),),
        )
      ],
    );
  }

  BoxConstraints get box {
    return const BoxConstraints.expand(width: 75, height: 40);
  }
}

class _ProductPrice {
  String title;

  int amount;

  String imgUrl;

  _ProductPrice({required this.title, required this.amount, required this.imgUrl});
}
